<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="relext.css" />
		<style type="text/css">
			.box {
				height: 60px;
				border-bottom: 1px solid #D3D3D3;
			}

			.box-p {
				width: 1500px;
				height: 40px;
				background-color: gainsboro;
				font-size: 17px;
				line-height: 40px;
				text-align: center;
				margin-left: 18px;
				margin-top: 18px;
			}
			.con{
				/* width: 100%; */
				height: 60px;
				margin-top: 533px;
				position: relative;
			}
			a{
				color: #696969;
			}
			.con1{
				/* width: 100%; */
				height: 60px;
				line-height: 60px;
				padding-left: 10px;
				background-color: gainsboro;
			}
			.con1 #con1s{
				cursor: pointer;
			}
			.con2{
				margin-left: 1200px;
				margin-top: -60px;
				color: #696969;
			}
			.con3{
				display: block;
				margin-left: 1350px;
				margin-top: -60px;
				color: #2093CC;
			}
			.con4{
				width: 80px;
				height: 30px;
				display: block;
				background-color: #FFFF00;
				position: absolute;
				left: 1440px;
				top: 15px;
				line-height: 30px;
				text-align: center;
				color: #696969;
			}
			.con-one{
				width: 250px;
				height: 150px;
				border: 1px solid lightgray;
				position: absolute;
				left: 680px;
				top: -300px;
				overflow: hidden;
				display: none;
			}
			.con-one .con-two{
				height: 50px;
				line-height: 50px;
				padding-left: 15px;
				color: gray;
				background-color: ghostwhite;
			}
			.con-one .con-two .con-btn{
				color: gray;
				border: 0;
				font-size: 18px;
				cursor: pointer;
				background-color: ghostwhite;
				margin-left: 170px;
			}
			.con-one .con-p{
				padding-left: 15px;
				padding-top: 25px;
				color: gray;
			}
			.con-one .con-b1{
				width: 60px;
				height: 30px;
				border: 1px solid white;
				margin-left: 110px;
				margin-top: 15px;
				background-color: dodgerblue;
				color: white;
				font-size: 17px;
			}
			.con-one .con-b2{
				width: 60px;
				height: 30px;
				border: 1px solid lightgray;
				margin-top: 15px;
				font-size: 17px;
			}
			.footer {
				width: 1518px;
				height: 50px;
				position: fixed;
				bottom: 0;
				background-color: ghostwhite;
			}
			
			.footer div {
				width: 370px;
				height: 50px;
				line-height: 50px;
				float: left;
				text-align: center;
				border: 1px solid lightgray;
				border-top: none;
				border-bottom: none;
				border-right: none;
			}
			
			.footer div a {
				color: #626262;
			
			}
			
			#footertwo1 {
				cursor: pointer;
			}
			
			.footer-two2 {
				width: 200px;
				height: 200px;
				border-radius: 5px;
				position: absolute;
				left: 482px;
				top: -250px;
				display: none;
			
			}
			
			.footer-two2 a li {
				width: 150px;
				height: 50px;
				background-color: #FFFFFF;
			}
			
			.footer-four1 {
				width: 100px;
				height: 150px;
				border-radius: 5px;
				position: absolute;
				left: 1220px;
				top: -150px;
				display: none;
			}
			
			#footerhelp {
				cursor: pointer;
			}
			
			.footer-four1 a li {
				width: 150px;
				height: 50px;
				background-color: #FFFFFF;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<p class="box-p">可选好利来专属附加产品</p>
		</div>
		<div class="con">
			<div class="con1">
				<a href="">全选</a>&nbsp;
				<a id="con1s">删除</a>
				<span class="con2">（不含运费）总计:</span>
				<em class="con3">￥0.00</em>
				<a href="Holiland.html" class="con4">下一步</a>
			</div>
			<div class="con-one" id="conone">
				<div class="con-two">
					信息
					<button type="button" class="con-btn" id="conbtn">×</button>
				</div>
				<p class="con-p">确定清空这些吗？</p>
				<button type="button" class="con-b1">确定</button>
				<button type="button" class="con-b2" id="conb2">取消</button>
			</div>
		</div>
		<div class="footer">
			<div class="footer-one"><a href="Holiland.html">主页</a></div>
			<div class="footer-two">
				<a class="footer-two1" id="footertwo1">产品</a>
				<ol class="footer-two2" id="footertwo2">
					<a href="XPXLcake.html">
						<li>新品系列</li>
					</a>
					<a href="Children.html">
						<li>儿童系列</li>
					</a>
					<a href="ZAXLcake.html">
						<li>珍爱系列</li>
					</a>
					<a href="Zunaicake.html">
						<li>尊爱系列</li>
					</a>
					<a href="HFQDcake.html">
						<li>和风钦点</li>
					</a>
				</ol>
			</div>
			<div class="footer-three"><a href="HFQDcake.html">和风钦点</a></div>
			<div class="footer-four">
				<a id="footerhelp">帮助中心</a>
				<ol class="footer-four1" id="footerfour1">
					<a href="login.html">
						<li>会员中心</li>
					</a>
					<a href="Stores.html">
						<li>门店列表</li>
					</a>
					<a href="Stores.html">
						<li>好利来招聘</li>
					</a>
				</ol>
			</div>
		</div>
	</body>
</html>
     <!-- 点击删除键 -->
<script>
	var oCon1s = document.getElementById("con1s");
	var oConone = document.getElementById("conone");
	var oConbtn = document.getElementById("conbtn");
	var oConb2 = document.getElementById("conb2");
	oCon1s.onclick = function(){
		oConone.style.display = "block";
	}
	oConbtn.onclick = function(){
		oConone.style.display = "none";
	}
	oConb2.onclick = function(){
		oConone.style.display = "none";
	}
</script>
      <!-- 底部 -->
<script>
	let oA = document.getElementById("footertwo1");
	let oOl = document.getElementById("footertwo2");
	let oB = document.getElementById("footerhelp");
	let oOli = document.getElementById("footerfour1");
	oA.onclick = function() {
		if (oOl.style.display == "none") {
			oOl.style.display = "block";
		} else {
			oOl.style.display = "none";
		};
	};
	oB.onclick = function() {
		if (oOli.style.display == "none") {
			oOli.style.display = "block";
		} else {
			oOli.style.display = "none";
		};
	};
</script>
